<html>
  <head>
  </head>
  <body>
    <div class="block">
      Slide Selector Test
    </div>
    <div class="block">
      <canvas id="cardSelect" width="640" height="400"></canvas>
    </div>
    <script>
      var CardSelect = new function () 
      {
        this.menu = 0;
        this.activeLevel = 0;
        this.slideStopLevel = 0;
        this.downPos = {x:0,y:0};
        this.currPos = 0; 
        this.currVel = {x:0,y:0};
        this.maxDepthLevel = 3;
        
        this.createDummyMenu = function(name, level, width)
        {
          var result = {active:0,slideStop:0,name:name, items:[]};
          
          if (level == 0)
          {
            return result;
          }
          for (var i=0; i<width; i++)
          {
            result.items[i] = this.createDummyMenu(name+i, level-1, width/2);;
          }
          return result;
        }
        function getElemOffset( element )
        {
          var offsetX = 0, offsetY = 0;
          if (element.offsetParent !== undefined) {
            do {
              offsetX += element.offsetLeft;
              offsetY += element.offsetTop;
            } while ((element = element.offsetParent));
          }
          return { x: offsetX, y: offsetY };
        }
        this.inputMove = function(p)
        { 
          var cardSize = CardSelect.getCardSize();
          var np = {x:p.x/cardSize.w, y:p.y/cardSize.h};
          
          var currLevel = Math.floor(CardSelect.activeLevel+np.y);
          var currMenu = CardSelect.getCurrMenu(currLevel);
          
          if (CardSelect.currPos == 0)
          {
            CardSelect.downPos = {x:currMenu.active+np.x,y:CardSelect.activeLevel+np.y};
            CardSelect.currPos = np;
            this.currVel = {x:0,y:0};
          }
          var numFrame = 20;
          var lerpVal = 0.3;
          var vel = {x:CardSelect.currPos.x-np.x, y: CardSelect.currPos.y-np.y};
          this.currVel = {x:vel.x*lerpVal+this.currVel.x*(1-lerpVal), y:vel.y*lerpVal+this.currVel.y*(1-lerpVal)};
          if (Math.abs(this.currVel.x) > Math.abs(this.currVel.y))
          {
            currMenu.slideStop = currMenu.active+this.currVel.x*numFrame;
            CardSelect.slideStopLevel = CardSelect.activeLevel;
          }
          else
          {
            CardSelect.slideStopLevel = CardSelect.activeLevel+this.currVel.y*numFrame;
            currMenu.slideStop = currMenu.active;
          }
          CardSelect.currPos = np;
        }
        this.init = function()
        {
          CardSelect.menu = CardSelect.createDummyMenu("n",CardSelect.maxDepthLevel,12);
          
          var canvas = document.getElementById('cardSelect');
          
          var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
          if (!isTouch)
          {
            var inputEvent = function(event)
            {
              if (event.which == 1)
              {
                var offset = getElemOffset(canvas);
                var p = { 
                  x : event.pageX - offset.x,
                  y : event.pageY - offset.y
                };
                CardSelect.inputMove(p);
              }
            }
            var endInputEvent = function(){CardSelect.currPos=0;}
            canvas.addEventListener('mousedown', inputEvent);
            canvas.addEventListener('mousemove', inputEvent);
            canvas.addEventListener('mouseup',endInputEvent);
            canvas.addEventListener('mouseout',endInputEvent);
          }
          else
          {
            var inputEvent = function(event)
            {
              if (event.targetTouches.length == 1) 
              {
                var offset = getElemOffset(canvas);
                var p = { 
                  x : event.targetTouches[0].pageX - offset.x,
                  y : event.targetTouches[0].pageY - offset.y
                };
                CardSelect.inputMove(p);
                event.preventDefault();
              }
            }
            var endInputEvent = function(){CardSelect.currPos=0;}
            canvas.addEventListener('touchstart',inputEvent );
            canvas.addEventListener('touchmove', inputEvent );
            canvas.addEventListener('touchend',endInputEvent);
            canvas.addEventListener('touchcancel',endInputEvent);
          }
          var timeHandle = setInterval(function(){CardSelect.redraw()}, 60);
         // CardSelect.redraw();
        }
        this.getCurrMenu = function(currLevel)
        {
          var currMenu = CardSelect.menu;
          for (var i=0; i<currLevel; i++)
          {
            var index = Math.floor(currMenu.active+0.5);
            currMenu = currMenu.items[index];
            if (currMenu == 0)
            {
              return 0;
            }
          }
          return currMenu;
        }
        this.getCardSize = function()
        {
          var canvas = document.getElementById('cardSelect');
          return {w:canvas.width/5, h:canvas.height/2};
        }
        this.redraw = function()
        {
          var canvas = document.getElementById('cardSelect');
          var ctx = canvas.getContext("2d");
          var cardSize = CardSelect.getCardSize();
          ctx.fillStyle = "#000000";
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          
          ctx.fillStyle = "#CC0000";
          ctx.fillRect(cardSize.w*2-1, 0, cardSize.w+2, cardSize.h);
          var maxDVar = (CardSelect.maxDepthLevel-1)*0.999;
          if (CardSelect.currPos != 0)
          {
            CardSelect.activeLevel = CardSelect.downPos.y - CardSelect.currPos.y;
            CardSelect.activeLevel = Math.max(0,CardSelect.activeLevel);
            CardSelect.activeLevel = Math.min(maxDVar,CardSelect.activeLevel);
          }
          else
          {
            CardSelect.slideStopLevel = Math.floor(CardSelect.slideStopLevel+0.5);
            CardSelect.slideStopLevel = Math.max(0,CardSelect.slideStopLevel);
            CardSelect.slideStopLevel = Math.min(maxDVar,CardSelect.slideStopLevel);
              
            var lerpVal = 0.3;
            CardSelect.activeLevel = CardSelect.slideStopLevel*lerpVal + CardSelect.activeLevel*(1-lerpVal);
          }
          
          var currLevel = Math.floor(CardSelect.downPos.y);
          for (var j=0; j<3; j++)
          {
            var pos = (CardSelect.activeLevel-Math.floor(CardSelect.activeLevel));
            var fadeScale1 = Math.max(0,1-Math.abs(j-pos));
            
            
            var lv0 = Math.floor(CardSelect.activeLevel)+j;
            var currMenu = CardSelect.getCurrMenu(lv0);
            if (currMenu.items.length == 0)
            {
              break;
            }
            var maxSlide = currMenu.items.length-1;
            if (CardSelect.currPos != 0 && lv0 == currLevel)
            {
              currMenu.active = CardSelect.downPos.x - CardSelect.currPos.x;
              currMenu.active = Math.max(0,currMenu.active);
              currMenu.active = Math.min(maxSlide,currMenu.active);
            }
            else
            { 
              currMenu.slideStop = Math.floor(currMenu.slideStop+0.5);
              currMenu.slideStop = Math.max(0,currMenu.slideStop);
              currMenu.slideStop = Math.min(maxSlide,currMenu.slideStop);
              
              var lerpVal = 0.3;
              currMenu.active = currMenu.slideStop*lerpVal + currMenu.active*(1-lerpVal);
            }
            var y = (j-pos)*cardSize.h;
            for (var i=0; i<currMenu.items.length; i++)
            {
              var fadeScale2 = Math.max(0,1-Math.abs(i-currMenu.active)/2);
              var fadeScale = Math.floor((fadeScale2*fadeScale1*0.5+0.5)*255);
           
           
              var x = (i-currMenu.active+2)*cardSize.w;
              ctx.fillStyle = "rgb("+fadeScale+","+fadeScale+","+fadeScale+")" ;
              ctx.fillRect(x+1, y+1, cardSize.w-2, cardSize.h-2);
              
              ctx.font = "12px sans serif";
              ctx.fillStyle = "#000000";
              ctx.textAlign = "center";
              ctx.textBaseline = "middle"; 
              ctx.fillText(currMenu.items[i].name, x+(cardSize.w-2)/2, y+(cardSize.h-2)/2);
            }
            var index = Math.floor(currMenu.active+0.5);
            currMenu = currMenu.items[index];
          }
        }
      }
      CardSelect.init();
    </script>
  </body>
</html>
